import Son from './components/son/son'
// css 样式
// 1. 普通方式
// import './index.scss' // 父组件样式
// 2. css modules方式
import styles from './index.module.scss'

/**
 * == 组件化样式的冲突问题：==
 * 1. 同名类名样式的覆盖
 * 2. 导入子组件和父组件样式的先后顺序 =》后边覆盖前边
 * 怎么解决？使用css modules(样式模块化)
 * 多人协作开发背景
 * 
 * == 组件如何定义css modules样式 ==
 * 1. 创建样式文件，名称格式为：`index.module.scss` =》 module是固定写法
  2. 在 `index.module.scss` 文件中，按照原来的方式写 CSS 即可
  3. **在 JS 中通过 `import styles from './index.module.scss'` 来导入样式文件**
  4. 在 JSX 结构中，通过 `className={styles.类名}` 形式来使用样式（此处的 类名 就是 CSS 中写的类名）

  // == css module 定义全局样式 ==
  语法：
   1. :global(类名) {样式} => 1个
   2. :global {  类名{} ...   } => 多个(推荐)
 */

console.log('styles:', styles)

function Test() {
  // js 逻辑
  return (
    // html 视图
    // <div className={[styles.box, styles.pd].join(' ')}>
    <div className={`${styles.box} ${styles.pd}`}>
      <h1>测试</h1>
      <div>
        <p className={styles.red}>字体颜色</p>
        <div>
          <Son />
        </div>
        <p className="orange bd">全局样式</p>
      </div>
    </div>
  )
}

export default Test
